<template id="grid-template">
	<table :datalist="gridData" :columns="gridColumns">
		<thead>
			<tr>
				<th v-for="col in gridColumns">
					{{ col | capitalize}}
				</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(list,index) in gridData">
				<td v-for="col in gridColumns">
					{{list[col]}}
				</td>
			</tr>
		</tbody>
	</table>
</template>



<script>
    export default {
        data() {
            return {
				gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],
				gridData: [],
				apiUrl: 'http://211.149.193.19:8080/api/customers'
            }
        },
        mounted: function() {//钩子函数，组件创建完成时调用getData方法获取数据 vue2.0
        	console.log("aaaaaaaaaaa");
			this.getData();
		},
        methods: {//所有的方法写在methods里面
            getData() {
				this.$http.get(this.apiUrl)
                .then((response) => { //异步
                    if (response) {
                        console.log(response);
                        this.gridData = response.data;
                    } else { //没有响应就再发起一次
                        console.error('agian');
                        //this.getData();
                    }
                }).catch(function(response) {
					console.log(response)
				});
            },
            addClass(e) { //通过这个方法完成天气信息的显示和隐藏。
                if (e.currentTarget.nodeName == 'LI') {
                    var li = e.currentTarget;
                    if (!/show/.test(li.className)) {
                        li.className += ' show';
                    } else {
                        li.className = li.className.replace(' show', '');
                    }
                }
            }
        }
    }
</script>